<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>task12 学习CSS 3的新特性</title>
    <link rel="stylesheet" type="text/css" href="task12.css">
</head>

<body>
    <div class="part1">
        <table>
            <thead>
                <tr>
                    <th>排名</th>
                    <th>网站</th>
                    <th>热度</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1.</td>
                    <td>百度前端技术学院</td>
                    <td>13000</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>百度前端技术学院</td>
                    <td>12000</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>百度前端技术学院</td>
                    <td>11000</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>百度前端技术学院</td>
                    <td>10000</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>百度前端技术学院</td>
                    <td>9000</td>
                </tr>
                <tr>
                    <td>6.</td>
                    <td>百度前端技术学院</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>7.</td>
                    <td>百度前端技术学院</td>
                    <td>7000</td>
                </tr>
                <tr>
                    <td>8.</td>
                    <td>百度前端技术学院</td>
                    <td>6000</td>
                </tr>
                <tr>
                    <td>9.</td>
                    <td>百度前端技术学院</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>10.</td>
                    <td>百度前端技术学院</td>
                    <td>4000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="part2">
        <input type="text" placeholder="点击变长" name="text" />
    </div>
    <div class="part3">
        <div class="part3_pics_box">
            <ul class="pics">
                <li id="img1"></li>
                <li id="img2"></li>
                <li id="img3"></li>
            </ul>
        </div>
        <ul class="change-btn">
            <li><a href="#img1">1</a></li>
            <li><a href="#img2">2</a></li>
            <li><a href="#img3">3</a></li>
        </ul>
    </div>
</body>

</html>